<template>
  <div
    class="taskbar-app"
    :class="{ active: isActive }"
    @click="$emit('click', window.id)"
  >
    <div class="app-icon" :style="{ background: window.color }">
      <el-icon :size="20">
        <component :is="window.icon" />
      </el-icon>
    </div>
    <span class="app-title">{{ window.title }}</span>
  </div>
</template>

<script setup>
defineProps({
  window: {
    type: Object,
    required: true
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

<style scoped>
.taskbar-app {
  min-width: 160px;
  max-width: 200px;
  height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.taskbar-app:hover {
  background: rgba(255, 255, 255, 0.1);
}

.taskbar-app.active {
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid #0078d4;
}

.app-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.app-title {
  font-size: 13px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

